<script lang="tsx">
import {Component, Vue} from 'vue-property-decorator'

interface XingMIng{
    name: string
    boolean: boolean
}
@Component
export default class App extends Vue {

    private posts: any = []

    private name = ""

    /**
     * 不要再类组件初始化异步的方法
     * Vue 类组件的工作方式，fetch 将被意外调用两次。
     */
    constructor() {
        super();
    }
    render() {
        console.log()
        return (
            <div>
                nihao <br/>
                {this.name}
            </div>
        )
    }
    /**
     * 要等待异步等待执行玩， 在调用 fangfa()， 否则会提示什么为定义， 因为异步不等待，数据没有给到就会报错
     */
    async created() {
        // 需要把posts.json文件放入public里面
        await fetch('/posts.json')
            .then(res => res.text())
            .then(posts => {
                let parse = JSON.parse(posts);
                this.posts = parse
            })
        this.fangfa()
    }

    fangfa() {
        let post: XingMIng = this.posts[0];
            console.log("df")
            this.name = post.name
    }
}
</script>

<style scoped>
#app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
}
</style>
